// 创建用户相关的小仓库
import { defineStore } from "pinia"
// defineStore实质就是一个工厂函数，调用执行会返回一个对象或实例而不用显示的使用 new 创建

// 引入数据类型
import type { loginForm, loginResponseData, userInfoResponseData } from "@/api/user/type"

import { reqLogin, reqUserInfo, reqLogout } from "@/api/user"
import { ref } from "vue"

import { GET_TOKEN, SET_TOKEN, REMOVE_TOKEN } from "@/utils/token"

// 引入常量路由
import { constanRoute } from "@/router/routes"
// import type { RouteRecordRaw } from "vue-router"

// 选项式写法：
// export const useUserStore = defineStore('User',{
//   state:()=>{
//     return {}
//   },
//   actions:{

//   },
//   getters:{}
// })

// 组合式写法：
export const useUserStore = defineStore("User", () => {
  // state
  // const token = ref(localStorage.getItem("TOKEN"))
  const token = ref(GET_TOKEN())
  let username = ref("")
  let avatar = ref("") //头像

  const menuRoutes = constanRoute //仓库存储生成菜单需要的路由数组

  // // actions
  // const userLogin = async (data: loginForm) => {
  //   // 登录请求
  //   let res: loginResponseData = await reqLogin(data)
  //   // 成功：200->token
  //   // 失败：201->登录失败错误信息
  //   if (res.code === 200) {
  //     token.value = res.data.token as string
  //     // 本地存储(持久化处理)
  //     // localStorage.setItem("TOKEN", (res.data.token as string))
  //     SET_TOKEN(res.data.token as string)
  //     // 保证当前async函数返回一个成功的promise
  //     return "ok"
  //   } else {
  //     // 返回一个失败的promise对象
  //     return Promise.reject(new Error(res.data.message))
  //   }
  // }
  const userLogin = async (data: loginForm) => {
    // 登录请求
    let res: loginResponseData = await reqLogin(data)
    // 成功：200->token
    // 失败：201->登录失败错误信息
    if (res.code === 200) {
      token.value = res.data as string
      // 本地存储(持久化处理)
      // localStorage.setItem("TOKEN", (res.data.token as string))
      SET_TOKEN(res.data as string)
      // 保证当前async函数返回一个成功的promise
      return "ok"
    } else {
      // 返回一个失败的promise对象
      return Promise.reject(new Error(res.data))
    }
  }

  const userInfo = async () => {
    let res: userInfoResponseData = await reqUserInfo()
    // 如果获取用户信息成功
    if (res.code === 200) {
      username.value = res.data.name
      avatar.value = res.data.avatar
      return "ok"
    } else {
      return Promise.reject(new Error(res.message))
    }
  }

  const userLogout = async () => {
    let res: any = await reqLogout()
    if (res.code == 200) {
      // 目前没有mock接口：退出登录接口(通知服务器本地用户唯一标识失效)
      token.value = ""
      username.value = ""
      avatar.value = ""
      REMOVE_TOKEN()
      return "ok"
    } else {
      return Promise.reject(new Error(res.message))
    }
  }

  return {
    userLogin,
    userInfo,
    userLogout,
    token,
    menuRoutes,
    username,
    avatar,
  }
})

// 选项式API 和 组合式API的区别总结：
// 1. 选项式里state中的数据为自动转为响应式数据而不用我们自己定义ref或reactive
// 2. 选项式里，actions要调用state里的数据需要this.xxx，而组合式中可以直接使用xxx
// 3. 选项式里的数据不用return出去，而组合式里的就需要
